<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('deckQuery')" />
    <link th:href="@{/css/mtgjson.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content text-center h-200 row">
                    <div class="col-sm-9"> <span id="chart1"></span> </div>
                    <div class="col-sm-3" id="desc1"> </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content text-center h-200 row">
                    <div class="col-sm-9"> <span id="chart2"></span> </div>
                    <div class="col-sm-3" id="desc2"> </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content text-center h-200 row">
                    <div class="col-sm-9"> <span id="chart3"></span> </div>
                    <div class="col-sm-3" id="desc3"> </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content">
                    <textarea id="deckStr" class="form-control" rows="20"></textarea>
                    <button onclick="deckQuery()" class="btn btn-primary btn-rounded btn-block">DECK</button>
                </div>
            </div>
        </div>
        <div class="col-sm-9">
            <div class="ibox">
                <div class="ibox-content" id="deckView" style="">

                </div>
            </div>
        </div>
    </div>



</div>

<th:block th:include="include :: footer" />
<script src="/ajax/libs/report/sparkline/jquery.sparkline.min.js"></script>

<script>

    $(function(){

        barChart1([0, 0, 0, 0, 0, 0, 0, 0])
        pieChart2([0, 0, 0, 0, 0, 0, 0])
        pieChart3([0, 0, 0, 0, 0])

    })

    function deckQuery() {
        $.modal.loading("查询中。。。")
        $.ajax({
            type: "POST",
            url: ctx + "mtg/deckQuery",
            data: { deckStr: $('#deckStr').val() },
            dataType: 'json',
            success: function(result) {
                $.modal.closeLoading()
                //console.log(result)
                if (result.code != 0) {
                    $.modal.alertError(result.msg)
                } else {
                    var data = result.data
                    var html = "";

                    var barData1 = [0, 0, 0, 0, 0, 0, 0, 0]
                    var pieData2 = [0, 0, 0, 0, 0, 0, 0]  // ['地', '神器', '结界', '瞬间', '法术', '生物', '鹏洛客']
                    var pieData3 = [0, 0, 0, 0, 0, 0] // B,G,R,U,W

                    var decks = "";

                    for (var d of data) {
                        decks += (d.str + '\n')
                        if (!d.found) {
                            html += ('<h5>NOT FOUND! ' + d.str + '</h5>')
                        } else {
                            var dc = d.cardData
                            // console.log(' === ', dc.name, ' === ')

                            var isLand = dc.type.toLowerCase().indexOf('land') > -1
                            var isArtifact = dc.type.toLowerCase().indexOf('artifact') > -1
                            var isEnchantment = dc.type.toLowerCase().indexOf('enchantment') > -1
                            var isInstant = dc.type.toLowerCase().indexOf('instant') > -1
                            var isSorcery = dc.type.toLowerCase().indexOf('sorcery') > -1
                            var isCreature = dc.type.toLowerCase().indexOf('creature') > -1
                            var isPlaneswalker = dc.type.toLowerCase().indexOf('planeswalker') > -1
                            // console.log(dc.type, ' ~~ ', isLand, isArtifact, isEnchantment, isInstant, isSorcery, isCreature, isPlaneswalker)

                            // B,G,R,U,W
                            var isB = dc.colors.indexOf('B') > -1
                            var isG = dc.colors.indexOf('G') > -1
                            var isR = dc.colors.indexOf('R') > -1
                            var isU = dc.colors.indexOf('U') > -1
                            var isW = dc.colors.indexOf('W') > -1
                            // console.log(dc.colors, ' ~~ ', isB, isG, isR, isU, isW)

                            html += renderCard(d.cnt, dc)

                            if (dc.convertedManaCost >= 7) {
                                barData1[7] = barData1[7] + d.cnt
                            } else {
                                barData1[parseInt(dc.convertedManaCost)] = barData1[parseInt(dc.convertedManaCost)] + d.cnt
                            }

                            // ['地', '神器', '结界', '瞬间', '法术', '生物', '鹏洛客']
                            if (isLand) {
                                pieData2[0] = pieData2[0] + d.cnt
                            }
                            if (isArtifact) {
                                pieData2[1] = pieData2[1] + d.cnt
                            }
                            if (isEnchantment) {
                                pieData2[2] = pieData2[2] + d.cnt
                            }
                            if (isInstant) {
                                pieData2[3] = pieData2[3] + d.cnt
                            }
                            if (isSorcery) {
                                pieData2[4] = pieData2[4] + d.cnt
                            }
                            if (isCreature) {
                                pieData2[5] = pieData2[5] + d.cnt
                            }
                            if (isPlaneswalker) {
                                pieData2[6] = pieData2[6] + d.cnt
                            }

                            // B,G,R,U,W
                            if (!isLand && isB) {
                                pieData3[0] = pieData3[0] + d.cnt
                            }
                            if (!isLand && isG) {
                                pieData3[1] = pieData3[1] + d.cnt
                            }
                            if (!isLand && isR) {
                                pieData3[2] = pieData3[2] + d.cnt
                            }
                            if (!isLand && isU) {
                                pieData3[3] = pieData3[3] + d.cnt
                            }
                            if (!isLand && isW) {
                                pieData3[4] = pieData3[4] + d.cnt
                            }

                        }
                    }
                    $('#deckView').html(html)
                    barChart1(barData1)
                    pieChart2(pieData2)
                    pieChart3(pieData3)
                    $('#deckStr').val(decks)
                }
            },
            error: function(error) {
                $.modal.closeLoading()
                $.modal.alertWarning("查询失败。");
            }
        });
    }

    function renderCard(cnt, card) {
        var html = ''
        html += ('<h5>')
        html += ('<span class="label label-danger">' + cnt + '</span>')
        html += readerCardInfo(card)
        if (card.others) {
            for (o of card.others) {
                html += ('<span class="label label-danger">+</span>')
                html += readerCardInfo(o)
            }
        }
        html += ('</h5>')
        return html
    }

    function readerCardInfo(card) {
        var html = ''
        html += ('<span class="label label-success">'
            + (card.nameCn ? (card.nameCn + ' / ' + card.name) : card.name) + '</span>')
        html += ('<span class="card-text-mana-cost">' + renderManaCost(card.manaCost) + '</span>')
        html += ('<span class="label label-info">' + (card.typeCn ? card.typeCn : card.type) + '</span>')
        if (card.power) {
            html += ('<span class="label label-warning">' + card.power + "/" + card.toughness + '</span>')
        }
        html += ('<span style="line-height: 20px;">' + renderText(card.textCn ? card.textCn : card.text) + '</span>')
        html += (' <a target="_blank" title="scryfall wiki" href="https://scryfall.com/search?q=' + encodeURIComponent(card.name) + '"><i class="fa fa-wikipedia-w"></i></a>')
        return html
    }

    function renderText(text) {
        if (!text) {
            return ''
        }
        text = text.replace(/\n/g, ' 』 ')
        text = renderManaCost(text)
        return text
    }

    function renderManaCost(manacost) {
        if (!manacost) {
            return ' ';
        }
        manacost = manacost.replace()
        return manacost.replace(/{(.+?)}/g, function(a, b) {
            var c = b.replace(/\//g, '')
            return '<abbr class="card-symbol card-symbol-' + c + '" title="' + b + '">' + b + '</abbr>'
        })
    }
    
    function pieChart3(data) {
        var title = ['黑', '绿', '红', '蓝', '白']  // B,G,R,U,W
        $("#chart3").sparkline(data, {
            type: 'pie',
            tooltipFormat: '{{offset:names}} - {{value}}',
            tooltipValueLookups: {
                names: {
                    0: title[0],
                    1: title[1],
                    2: title[2],
                    3: title[3],
                    4: title[4],
                }
            },
            height: '180px',
            sliceColors: ["#000000", "#228B22", "#FF4500", "#6495ED", "#FFFAF0"]});

        var html = '';
        for (var i = 0; i < data.length; i++) {
            if (data[i] > 0) {
                html = html + title[i] + ': ' + data[i] + ' 张' + '<br>'
            }
        }
        $('#desc3').html(html)
    }

    function pieChart2(data) {
        var title = ['地', '神器', '结界', '瞬间', '法术', '生物', '鹏洛客']
        $("#chart2").sparkline(data, {
            type: 'pie',
            tooltipFormat: '{{offset:names}} - {{value}}',
            tooltipValueLookups: {
                names: {
                    0: title[0],
                    1: title[1],
                    2: title[2],
                    3: title[3],
                    4: title[4],
                    5: title[5],
                    6: title[6],
                }
            },
            height: '180px',
            sliceColors: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3", "#e5cf0d"]});

        var html = '';
        for (var i = 0; i < data.length; i++) {
            if (data[i] > 0) {
                html = html + title[i] + ': ' + data[i] + ' 张' + '<br>'
            }
        }
        $('#desc2').html(html)
    }

    function barChart1(data) {
        $("#chart1").sparkline(data, {
            type: 'bar',
            tooltipFormat: '{{offset:names}} - {{value}}',
            tooltipValueLookups: {
                names: {
                    0: '0费',
                    1: '1费',
                    2: '2费',
                    3: '3费',
                    4: '4费',
                    5: '5费',
                    6: '6费',
                    7: '7+费',
                }
            },
            barWidth: 36,
            height: '180px',
            barColor: '#1ab394',
            negBarColor: '#c6c6c6'});

        var html = ''
        var isAllZero = true
        var all = 0
        for (var i = 0; i < data.length; i++) {
            isAllZero &= (data[i] == 0)
            html = html + (i == 7 ? '7+' : i) + '费: ' + data[i] + ' 张' + '<br>'
            all += data[i]
        }
        html = html + '--------<br>'
        html = html + '共计: ' + all + '张'
        $('#desc1').html(isAllZero ? '' : html)
    }
</script>
</body>
</html>